<template>
  <div class="run-contail">
    <img class="run-img"
         v-if="type==='img'"
         :src="src"
         @click="open" />

    <video width="100%"
           preload=auto
           autoplay="autoplay"
           loop
           muted="true"
           v-else-if="type==='video'">
      <source :src="src"
              type="video/mp4">
    </video>
    <div class="run-footer">
      <div class="logo">
        <img :src="logo">
      </div>
      <div class="menu"
           v-if="flag">
        <span class="time">{{time}}s </span>
        <van-button size="small"
                    class="link"
                    @click="handleGo">跳过</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getRun, getMaintain } from '@/api/common';
import baseCommon from '@/mixins/common';
import { validatenull } from '@/util/validate';
import logo from '@/assets/img/logo.png';
import { setTimeout } from 'timers';

export default {
  name: 'run',
  mixins: [baseCommon()],
  data() {
    return {
      flag: true,
      mytime: '',
      logo,
      time: 3,
      type: '',
      src: '',
      href: '',
      title: '',
    };
  },
  created() {
    this.getRun();
  },
  mounted() {
    this.timeInit();
  },
  computed: {
    ...mapGetters(['token', 'minHeight', 'community']),
  },

  methods: {
    open() {
      this.$router.replace({
        path: '/iframe/urlPath',
        query: Object.assign({
          src: this.href,
          title: this.title,
        }, {
          backSrc: '/index/main',
        }),
      });
    },
    getRun() {
      getRun().then((res) => {
        const data = res.data.data;
        this.src = data.src;
        this.href = data.href;
        this.title = data.title;
        setTimeout(() => {
          this.type = data.type;
        }, 500);
      });
    },
    timeInit() {
      this.mytime = setInterval(() => {
        if (this.time <= 0) {
          clearInterval(this.mytime);
          this.handleGo();
        } else {
          this.time = this.time - 1;
        }
      }, 1000);
    },
    handleGo() {
      clearInterval(this.mytime);
      getMaintain().then((res) => {
        const data = res.data.data;
        const status = data.status;
        if (!status) {
          this.flag = false;
          this.$message.success('为了增强更好的客户体验,app临时停机维护');
        } else if (validatenull(this.community)) {
          this.$router.replace({ path: '/user' });
        } else {
          this.$router.replace({ path: '/index' });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.run-contail {
  position: relative;
  height: 100%;
  background-color: #000;
}
.run-img {
  width: 100%;
}
.run-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  img {
    width: 180px;
  }
  .menu {
    color: #fff;
    .time {
      margin-right: 8px;
    }
    .link {
      background-color: transparent;
      color: #fff;
    }
  }
}
</style>

